@import "config";
.web{
  height: 100%;
  background: url("../img/bg_img.png") no-repeat center/cover;
  .ranking-box,.my-box{
    text-align: center;
  }
  .ranking_list{
    display: inline-block;
    .top{
      margin-top: hr(60);
    }
    .rank-box{
      position: relative;
      ul{
        width: hr(504);
        height: hr(720);
        border: 1px solid #e0a583;
        overflow: hidden;
        overflow-y: scroll;
        overflow-scrolling: touch;
        li{
          height: hr(90);
          line-height: hr(90);
          padding: 0 hr(40) 0 0;
          border-bottom: 1px solid #e0a583;

          &:last-of-type{
            border: none;
          }
          &:first-of-type .ranking,&:first-of-type .name, &:first-of-type .visitors,
          &:nth-of-type(2) .ranking,&:nth-of-type(2) .name,&:nth-of-type(2) .visitors,
          &:nth-of-type(3) .ranking,&:nth-of-type(3) .name,&:nth-of-type(3) .visitors{
            color: $yellow;
          }
          .ranking{
            width: hr(70);
            font-size: hr(20);
            color: #fff;
            text-align: center;
            position: relative;
            margin-left: hr(10);
            .icon-huangguan{
              font-size: hr(16);
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: hr(-18);
          }
            .crown1{
              color: #ffce00;
            }
            .crown2{
              color: #d3d3d3;
            }
            .crown3{
              color: #e7c598;
            }
          }
          .head_portrait{
            width: hr(62);
            height: hr(62);
            overflow: hidden;
            margin-top: hr(14);
            border-radius: 50%;
            border: 1px solid gainsboro;
            margin-left: hr(40);
            img{
              width: 100%;
            }
          }
          .name{
            font-size: hr(20);
            margin-left: hr(16);
            color: #fff;
          }
          .visitors{
            font-size: hr(20);
            color: #fff;
          }
        }
        .my_ranking{
          background: $yellow;
          position: absolute;
          bottom: hr(-90);
          left: 0;
          right: 0;
          .ranking,.name,.visitors{
            color: $red;
          }
        }
      }
    }
  }
}